div{
    width: 100px;
    height: 100px;
    p{
        width: 50px;
        height: 50px;
        span{
            color: red;
        }
    }
}
// 以上代码是一个嵌套的 SCSS 示例，展示了如何使用嵌套规则来组织样式。
// 这种方式可以使样式更加清晰和易于维护。
// 在这个例子中，`div` 元素包含一个 `p` 元素，而 `p` 元素又包含一个 `span` 元素。
// 通过这种嵌套方式，我们可以更直观地看到元素之间的层级关系。
// 注意：在实际使用中，嵌套过深可能会导致样式难以管理，因此建议适度使用嵌套。


ul{
    >li{
        color: blue;
        &:hover{
            color: green;
        }
    }
}
// 以上代码展示了 SCSS 中的父选择器 `&` 的用法。
// 在这个例子中，`ul` 元素下的直接子元素 `li` 被选中，并且当鼠标悬停在 `li` 上时，颜色会变为绿色。
// 这种方式可以使样式更加清晰，并且避免了过多的类名嵌套。
// 注意：在 SCSS 中，`&` 符号代表父选择器，可以用来引用当前选择器的父元素。
// 这种方式可以使样式更加清晰，并且避免了过多的类名嵌套。
